
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8"/>
    <title>IconFont</title>
    <link rel="stylesheet" href="demo.css">
    <link rel="stylesheet" href="iconfont.css">
</head>
<body>
    <div class="main">
        <h1>IconFont 图标</h1>
        <ul class="icon_lists clear">
            
                <li>
                <i class="icon iconfont">&#xe608;</i>
                    <div class="name">鞋\箱包</div>
                    <div class="code">&amp;#xe608;</div>
                    <div class="fontclass">.xiexiangbao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe600;</i>
                    <div class="name">化妆品</div>
                    <div class="code">&amp;#xe600;</div>
                    <div class="fontclass">.huazhuangpin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe624;</i>
                    <div class="name">首页</div>
                    <div class="code">&amp;#xe624;</div>
                    <div class="fontclass">.shouye</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe654;</i>
                    <div class="name">编辑</div>
                    <div class="code">&amp;#xe654;</div>
                    <div class="fontclass">.bianji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe64a;</i>
                    <div class="name">禁止</div>
                    <div class="code">&amp;#xe64a;</div>
                    <div class="fontclass">.jinzhi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe64b;</i>
                    <div class="name">提示</div>
                    <div class="code">&amp;#xe64b;</div>
                    <div class="fontclass">.tishi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe625;</i>
                    <div class="name">安卓</div>
                    <div class="code">&amp;#xe625;</div>
                    <div class="fontclass">.anzhuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe633;</i>
                    <div class="name">赞</div>
                    <div class="code">&amp;#xe633;</div>
                    <div class="fontclass">.zan</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe605;</i>
                    <div class="name">心</div>
                    <div class="code">&amp;#xe605;</div>
                    <div class="fontclass">.xin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe64c;</i>
                    <div class="name">返回</div>
                    <div class="code">&amp;#xe64c;</div>
                    <div class="fontclass">.fanhui</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe655;</i>
                    <div class="name">新增</div>
                    <div class="code">&amp;#xe655;</div>
                    <div class="fontclass">.xinzeng</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe656;</i>
                    <div class="name">编辑</div>
                    <div class="code">&amp;#xe656;</div>
                    <div class="fontclass">.bianji1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe634;</i>
                    <div class="name">显示器</div>
                    <div class="code">&amp;#xe634;</div>
                    <div class="fontclass">.xianshiqi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe641;</i>
                    <div class="name">购物车</div>
                    <div class="code">&amp;#xe641;</div>
                    <div class="fontclass">.shopping-cart</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe626;</i>
                    <div class="name">ios</div>
                    <div class="code">&amp;#xe626;</div>
                    <div class="fontclass">.ios</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe606;</i>
                    <div class="name">购物车</div>
                    <div class="code">&amp;#xe606;</div>
                    <div class="fontclass">.unie63c</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63b;</i>
                    <div class="name">信用卡</div>
                    <div class="code">&amp;#xe63b;</div>
                    <div class="fontclass">.xinyongqia</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63c;</i>
                    <div class="name">金牌供应商</div>
                    <div class="code">&amp;#xe63c;</div>
                    <div class="fontclass">.gold</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe609;</i>
                    <div class="name">家电-线</div>
                    <div class="code">&amp;#xe609;</div>
                    <div class="fontclass">.jiadianxian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe64d;</i>
                    <div class="name">成功</div>
                    <div class="code">&amp;#xe64d;</div>
                    <div class="fontclass">.success</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe619;</i>
                    <div class="name">菜鸟-向右收起</div>
                    <div class="code">&amp;#xe619;</div>
                    <div class="fontclass">.xiangyoushouqi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe62b;</i>
                    <div class="name">油漆</div>
                    <div class="code">&amp;#xe62b;</div>
                    <div class="fontclass">.youqi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60a;</i>
                    <div class="name">天猫超市</div>
                    <div class="code">&amp;#xe60a;</div>
                    <div class="fontclass">.tianmaochaoshi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61a;</i>
                    <div class="name">会员权益_先试后买_1px</div>
                    <div class="code">&amp;#xe61a;</div>
                    <div class="fontclass">.huiyuanquanyixianshihoumai1px</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61b;</i>
                    <div class="name">会员权益_品牌专享_1px</div>
                    <div class="code">&amp;#xe61b;</div>
                    <div class="fontclass">.huiyuanquanyipinpaizhuanxiang1px</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61c;</i>
                    <div class="name">会员权益_售后无忧_1px</div>
                    <div class="code">&amp;#xe61c;</div>
                    <div class="fontclass">.huiyuanquanyishouhouwuyou1px</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61d;</i>
                    <div class="name">会员权益_天猫分期_1px</div>
                    <div class="code">&amp;#xe61d;</div>
                    <div class="fontclass">.huiyuanquanyitianmaofenqi1px</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61e;</i>
                    <div class="name">会员权益_客服优先_1px</div>
                    <div class="code">&amp;#xe61e;</div>
                    <div class="fontclass">.huiyuanquanyikefuyouxian1px</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe61f;</i>
                    <div class="name">会员权益_极速退款_1px</div>
                    <div class="code">&amp;#xe61f;</div>
                    <div class="fontclass">.huiyuanquanyijisutuikuan1px</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe620;</i>
                    <div class="name">会员权益_生日特权_1px</div>
                    <div class="code">&amp;#xe620;</div>
                    <div class="fontclass">.huiyuanquanyishengritequan1px</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe621;</i>
                    <div class="name">会员权益_退货保障卡_1px</div>
                    <div class="code">&amp;#xe621;</div>
                    <div class="fontclass">.huiyuanquanyituihuobaozhangqia1px</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe601;</i>
                    <div class="name">鞋子</div>
                    <div class="code">&amp;#xe601;</div>
                    <div class="fontclass">.xiezi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe658;</i>
                    <div class="name">balance</div>
                    <div class="code">&amp;#xe658;</div>
                    <div class="fontclass">.balance</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63d;</i>
                    <div class="name">教育行业</div>
                    <div class="code">&amp;#xe63d;</div>
                    <div class="fontclass">.jiaoyuxingye</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63e;</i>
                    <div class="name">餐饮行业</div>
                    <div class="code">&amp;#xe63e;</div>
                    <div class="fontclass">.canyinxingye</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe64e;</i>
                    <div class="name">危险</div>
                    <div class="code">&amp;#xe64e;</div>
                    <div class="fontclass">.weixian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe635;</i>
                    <div class="name">精品推荐</div>
                    <div class="code">&amp;#xe635;</div>
                    <div class="fontclass">.jingpintuijian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe64f;</i>
                    <div class="name">失败</div>
                    <div class="code">&amp;#xe64f;</div>
                    <div class="fontclass">.shibai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60b;</i>
                    <div class="name">汽车</div>
                    <div class="code">&amp;#xe60b;</div>
                    <div class="fontclass">.svg12</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63f;</i>
                    <div class="name">金融行业</div>
                    <div class="code">&amp;#xe63f;</div>
                    <div class="fontclass">.jinrongxingye</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe623;</i>
                    <div class="name">心</div>
                    <div class="code">&amp;#xe623;</div>
                    <div class="fontclass">.hert</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60c;</i>
                    <div class="name">母婴</div>
                    <div class="code">&amp;#xe60c;</div>
                    <div class="fontclass">.muying</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe642;</i>
                    <div class="name">警告</div>
                    <div class="code">&amp;#xe642;</div>
                    <div class="fontclass">.warning</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe614;</i>
                    <div class="name">icon_女鞋1</div>
                    <div class="code">&amp;#xe614;</div>
                    <div class="fontclass">.iconnvxie</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60d;</i>
                    <div class="name">厨具1</div>
                    <div class="code">&amp;#xe60d;</div>
                    <div class="fontclass">.chuju1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe607;</i>
                    <div class="name">分类</div>
                    <div class="code">&amp;#xe607;</div>
                    <div class="fontclass">.fenlei</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe643;</i>
                    <div class="name">时间（公益时间）</div>
                    <div class="code">&amp;#xe643;</div>
                    <div class="fontclass">.time</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe636;</i>
                    <div class="name">拍卖</div>
                    <div class="code">&amp;#xe636;</div>
                    <div class="fontclass">.paimai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe650;</i>
                    <div class="name">注意</div>
                    <div class="code">&amp;#xe650;</div>
                    <div class="fontclass">.noun138462</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe616;</i>
                    <div class="name">健康_内衣</div>
                    <div class="code">&amp;#xe616;</div>
                    <div class="fontclass">.jiankangneiyi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe644;</i>
                    <div class="name">立刻预约</div>
                    <div class="code">&amp;#xe644;</div>
                    <div class="fontclass">.likeyuyue</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe617;</i>
                    <div class="name">户外运动</div>
                    <div class="code">&amp;#xe617;</div>
                    <div class="fontclass">.icons06</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe627;</i>
                    <div class="name">湖畔扳手</div>
                    <div class="code">&amp;#xe627;</div>
                    <div class="fontclass">.hupanbanshou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe602;</i>
                    <div class="name">钻石</div>
                    <div class="code">&amp;#xe602;</div>
                    <div class="fontclass">.iconfontzhubaoshipin</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60e;</i>
                    <div class="name">手机</div>
                    <div class="code">&amp;#xe60e;</div>
                    <div class="fontclass">.shouji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe628;</i>
                    <div class="name">进口酒</div>
                    <div class="code">&amp;#xe628;</div>
                    <div class="fontclass">.jinkoujiu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe629;</i>
                    <div class="name">厨电_鱼</div>
                    <div class="code">&amp;#xe629;</div>
                    <div class="fontclass">.chudianyu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe640;</i>
                    <div class="name">供应商</div>
                    <div class="code">&amp;#xe640;</div>
                    <div class="fontclass">.gongyingshang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe649;</i>
                    <div class="name">mft-垃圾桶</div>
                    <div class="code">&amp;#xe649;</div>
                    <div class="fontclass">.iconfontdelete</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe62d;</i>
                    <div class="name">图书</div>
                    <div class="code">&amp;#xe62d;</div>
                    <div class="fontclass">.books</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe651;</i>
                    <div class="name">广播</div>
                    <div class="code">&amp;#xe651;</div>
                    <div class="fontclass">.guangbo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe62e;</i>
                    <div class="name">乐器</div>
                    <div class="code">&amp;#xe62e;</div>
                    <div class="fontclass">.leqi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe645;</i>
                    <div class="name">人</div>
                    <div class="code">&amp;#xe645;</div>
                    <div class="fontclass">.ren</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe615;</i>
                    <div class="name">手机</div>
                    <div class="code">&amp;#xe615;</div>
                    <div class="fontclass">.icon</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe62f;</i>
                    <div class="name">医药</div>
                    <div class="code">&amp;#xe62f;</div>
                    <div class="fontclass">.yiyao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe652;</i>
                    <div class="name">失败</div>
                    <div class="code">&amp;#xe652;</div>
                    <div class="fontclass">.shibai1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe618;</i>
                    <div class="name">腕表</div>
                    <div class="code">&amp;#xe618;</div>
                    <div class="fontclass">.wanbiao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe653;</i>
                    <div class="name">失败</div>
                    <div class="code">&amp;#xe653;</div>
                    <div class="fontclass">.artboard28</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe659;</i>
                    <div class="name">红包</div>
                    <div class="code">&amp;#xe659;</div>
                    <div class="fontclass">.redbag</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe637;</i>
                    <div class="name">标记</div>
                    <div class="code">&amp;#xe637;</div>
                    <div class="fontclass">.biaoji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe603;</i>
                    <div class="name">女装</div>
                    <div class="code">&amp;#xe603;</div>
                    <div class="fontclass">.nvzhuang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe646;</i>
                    <div class="name">折扣</div>
                    <div class="code">&amp;#xe646;</div>
                    <div class="fontclass">.zhekou</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe638;</i>
                    <div class="name">火</div>
                    <div class="code">&amp;#xe638;</div>
                    <div class="fontclass">.iconfonthuo</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe60f;</i>
                    <div class="name">零食</div>
                    <div class="code">&amp;#xe60f;</div>
                    <div class="fontclass">.lingshi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe639;</i>
                    <div class="name">运动</div>
                    <div class="code">&amp;#xe639;</div>
                    <div class="fontclass">.yundong</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe610;</i>
                    <div class="name">家纺家饰</div>
                    <div class="code">&amp;#xe610;</div>
                    <div class="fontclass">.jiafangjiashi</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe611;</i>
                    <div class="name">家具建材</div>
                    <div class="code">&amp;#xe611;</div>
                    <div class="fontclass">.jiajujiancai</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe612;</i>
                    <div class="name">图书音像</div>
                    <div class="code">&amp;#xe612;</div>
                    <div class="fontclass">.tushuyinxiang</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe613;</i>
                    <div class="name">医药保健</div>
                    <div class="code">&amp;#xe613;</div>
                    <div class="fontclass">.yiyaobaojian</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe630;</i>
                    <div class="name">耳机</div>
                    <div class="code">&amp;#xe630;</div>
                    <div class="fontclass">.erji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe622;</i>
                    <div class="name">箭头</div>
                    <div class="code">&amp;#xe622;</div>
                    <div class="fontclass">.iconfonti2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe604;</i>
                    <div class="name">男装</div>
                    <div class="code">&amp;#xe604;</div>
                    <div class="fontclass">.iconfonticonnanzhuang1</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe65a;</i>
                    <div class="name">积分</div>
                    <div class="code">&amp;#xe65a;</div>
                    <div class="fontclass">.jifen</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe647;</i>
                    <div class="name">评分</div>
                    <div class="code">&amp;#xe647;</div>
                    <div class="fontclass">.appxiugaiicon45</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe631;</i>
                    <div class="name">相机</div>
                    <div class="code">&amp;#xe631;</div>
                    <div class="fontclass">.xiangji</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe62c;</i>
                    <div class="name">建筑</div>
                    <div class="code">&amp;#xe62c;</div>
                    <div class="fontclass">.jianzhu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe648;</i>
                    <div class="name">店铺</div>
                    <div class="code">&amp;#xe648;</div>
                    <div class="fontclass">.dianpu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe632;</i>
                    <div class="name">洗发水</div>
                    <div class="code">&amp;#xe632;</div>
                    <div class="fontclass">.iconfontmuyulu</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe657;</i>
                    <div class="name">新增</div>
                    <div class="code">&amp;#xe657;</div>
                    <div class="fontclass">.weibiaoti2</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe62a;</i>
                    <div class="name">包</div>
                    <div class="code">&amp;#xe62a;</div>
                    <div class="fontclass">.bao</div>
                </li>
            
                <li>
                <i class="icon iconfont">&#xe63a;</i>
                    <div class="name">YOA-咖啡</div>
                    <div class="code">&amp;#xe63a;</div>
                    <div class="fontclass">.yoakafei</div>
                </li>
            
        </ul>


        <div class="helps">
            第一步：使用font-face声明字体
            <pre>
@font-face {font-family: 'iconfont';
    src: url('iconfont.eot'); /* IE9*/
    src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
    url('iconfont.woff') format('woff'), /* chrome、firefox */
    url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
    url('iconfont.svg#iconfont') format('svg'); /* iOS 4.1- */
}
</pre>
第二步：定义使用iconfont的样式
            <pre>
.iconfont{
    font-family:"iconfont" !important;
    font-size:16px;font-style:normal;
    -webkit-font-smoothing: antialiased;
    -webkit-text-stroke-width: 0.2px;
    -moz-osx-font-smoothing: grayscale;}
</pre>
第三步：挑选相应图标并获取字体编码，应用于页面
<pre>
&lt;i class="iconfont"&gt;&amp;#x33;&lt;/i&gt;
</pre>
        </div>

    </div>
</body>
</html>
